<template>
  
  <div class="div-main">
    
    <div class="login-container">
    <el-form ref="loginForm" class="login-form" auto-complete="on" label-position="left">

      <div class="title-container">
        <h3 class="title">追光人后台管理</h3>
      </div>

      <el-form-item prop="username">

        <el-input v-model="adminName" placeholder="管理员账号" prefix-icon="el-icon-user-solid"></el-input>

      </el-form-item>

      <el-form-item prop="password">
        <el-input placeholder="请输入密码" v-model="adminPassword" show-password prefix-icon="el-icon-key"></el-input>
      </el-form-item>

      <el-button type="primary" style="width:100%;margin-bottom:30px;" @click="login">登录</el-button>
      <el-link href="http://localhost:7070/#/regist" type="primary">没有账号？点击注册</el-link>
    </el-form>
  </div>

  </div>
</template>
<script>
import api from '@/api/adminrole'
  export default {
    data() {
      return {
        adminName: '',
        adminPassword: '',
        password:''
      }
    },
    methods: {
      login(){
        // 发送请求判断
        api.getByName(this.adminName).then(response => {
          
          this.admin = response.data.data;
          response.data.data.forEach((a) => {
            console.log(a.adminPassword);
            this.password=a.adminPassword;
          })
          if(typeof this.password!= "undefined" && this.password!= null && this.password!= "")
          {
            if(this.password==this.adminPassword)
            {
              this.$router.push('/index');
            }else{
              alert("密码错误!");
            }
            
          }else{
            alert("用户不存在!");
          }
      })
       
      }
    }
  }
</script>
<style >
.title-container{
  display: flex;
  color: #eee;
    /*实现水平居中*/
    justify-content: center;
}
.div-main{
  min-height: calc(105vh - 29px);
  background-color:#2d3a4b;
  /* padding:20px 20px 20px 20px; */
   /*flex 布局*/
   display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
}
.login-container{
  background-color:#2d3a4b;
  width: 350px;
  
}

</style>